<template>

	<view class="three">
		<!--<view class="divider">
			<view :style="{visibility:isFirst?'hidden':'visible'}" class="up-dash"></view>
			<view class="dot" :class="item.hasLearned=='1'?'dot-active':''"></view>
			<view :style="{visibility:isLast?'hidden':'visible'}" class="down-dash"></view>
		</view>
		-->
		<view class="content" :class="item.hasLearned=='1'?'active':''" @click="goPlay">
			<image class="course-type" :class="item.hasLearned=='1'?'course-type-active':''" :src="getTypeIcon(item.type)"></image>
			<view>【{{getTypeDesc(item.type)}}】{{item.title}}</view>
			<!--<view v-if='item.hasLearned=="2"' class="tag tag-finished">已学完</view>
			<view v-else-if='item.hasLearned=="1"' class="tag tag-studing">学习中</view>
			<view v-else-if='item.hasLearned=="0"' class="tag tag-undone">未学</view>
			-->
			<view class="teacher">{{item.tutor}}</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return []
				}
			},
			isFirst: {
				type: Boolean,
				default: false
			},
			isLast: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			getTypeDesc(type){
				return {
					'0':'word',
					'1':'PPT',
					'2':'PDF',
					'3':'视频',
					'4':'自定义'
				}[type]
			},
			getTypeIcon(type){
				return {
					'0':require('@/static/course/word-icon.png'),
					'1':require('@/static/course/ppt-icon.png'),
					'2':require('@/static/course/pdf-icon.png'),
					'3':require('@/static/course/video-icon.png'),
					'4':require('@/static/course/txt-image-icon.png')
				}[type]
			},
			goPlay() {
				uni.navigateTo({
					url: `/pages/course/coursePlay?lessonId=${this.item.lessonId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.three {
		padding: 15upx 0;
		align-items: center;
		font-size: 24upx;
		color: #333333;
		position: relative;
		line-height: 1;
		margin-left: 54upx;
	}

	.divider {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 10upx;
		flex-direction: column;
	}

	.up-dash {
		flex: 1;
		margin-top: 4upx;
		border-left: 2upx dashed #d8d8d8;
	}

	.down-dash {
		flex: 1;
		margin-bottom: 4upx;
		border-left: 2upx dashed #d8d8d8;
	}

	.dot {
		width: 10upx;
		height: 10upx;
		margin: 6upx 0;
		border-radius: 50%;
		background-color: #d8d8d8;

		&-active {
			background-color: #4a96f2;
		}
	}

	.content {
		display: flex;
		align-items: center;
		color: #999999;
	}

	.active {
		color: #4a96f2;
	}

	.course-type {
		width: 25upx;
		height: 25upx;
		margin-right: 5upx;
		border-radius: 50%;
		&-active{
			background-color: #4a96f2;
		}
	
	}
	.teacher {
		font-size: 24upx;
		flex: 1;
		text-align: right;
	}

	.tag {
		margin: 0 20upx;
		font-size: 16upx;
		border-radius: 2upx;
		padding: 0 4upx;

		&-finished {
			color: #f24a4a;
			background-color: #fff0f0;
		}

		&-studing {
			color: #FFFFFF;
			background-color: #4a96f2;
		}

		&-undone {
			background-color: #d8d8d8;
			color: #FFFFFF;
		}
	}
</style>
